import React, { Component } from 'react'
import '../css/Index.css'
import {
  HashRouter,
  Switch,
  Route,
  Link
} from 'react-router-dom';

import Banner1 from './Banner1'
import Banner2 from './Banner2'
import Banner3 from './Banner3'
import Banner4 from './Banner4'
import Banner5 from './Banner5'
import Banner6 from './Banner6'
import Banner7 from './Banner7'
import Banner8 from './Banner8'


class Index extends Component {
	constructor(props) {
		super(props)
		this.state = {
			nav: [
				'小米商城',
				'MIUI',
				'loT',
				'云服务',
				'天星科技',
				'有品',
				'小爱开放平台',
				'企业团购',
				'资质证照',
				'协议规则',
				'下载app',
				'智能生活',
				'SelectLocation',
			],
			nav2: [
				'全部商品分类',
				'小米手机',
				'Redmi红米',
				'电视',
				'笔记本',
				'家电',
				'路由器',
				'智能硬件',
				'服务',
				'社区',
      ],


			username: '',
		}
	}

	componentDidMount() {
		if (this.props.location.state) {
			this.setState({
				username: this.props.location.state.username,
			})
		}
	}

	render() {
		return (
			<div className="wrapper">
				<div className="header">
					<div className="w">
						<div className="nav">
							<ul>
								{this.state.nav.map((item, index) => {
									return <li key={index}>{item}</li>
								})}
							</ul>
						</div>

						<div className="login1">
							<ul className="uu">
								<li
									onClick={() => {
										console.log(this.props)
										this.props.history.push('/Login')
									}}
								>
									登录
								</li>
								<li>当前用户：{this.state.username}</li>
								<li>注册</li>
								<li>消息通知</li>
							</ul>
							<button className="car">购物车（0）</button>
						</div>
					</div>
				</div>
				<div className="menu">
					<div className="w">
						<h1>
							<img src="logo.png" alt="这是个图片" />
						</h1>
						<ul>
							{this.state.nav2.map((item, index) => {
								return <li key={index}>{item}</li>
							})}
						</ul>
						<input type="text" placeholder="Rdemin K30 Pro 变焦版" />
					</div>
				</div>

				<div className="crumbs">
					<div className="w">
						<p>
							<span>首页 </span>
							<span>/ 关于小米</span> <span></span>
						</p>
					</div>
				</div>

				<div className="banner">
          <HashRouter>
					<div className="bannernav">
						<div class="w">
              <ul className="uu1">
                <li><Link to="/">公司简介</Link></li>
                <li><Link to="/Banner2">管理团队</Link></li>
                <li><Link to="/Banner3">小米文化</Link></li>
                <li><Link to="/Banner4">发展经历</Link></li>
                <li><Link to="/Banner5">小米新闻</Link></li>
                <li><Link to="/Banner6">加入小米</Link></li>
                <li><Link to="/Banner7">投资者光系</Link></li>
                <li><Link to="/Banner8">联系我们</Link></li>
              </ul>

            </div>
					</div>
          <div className="bannermain">
            <div className="w">
                <Switch>
                
                <Route path="/Banner2" component={Banner2} />
                <Route path="/Banner3" component={Banner3} />
                <Route path="/Banner4" component={Banner4} />
                <Route path="/Banner5" component={Banner5} />
                <Route path="/Banner6" component={Banner6} />
                <Route path="/Banner7" component={Banner7} />
                <Route path="/Banner8" component={Banner8} />
                <Route path="/" component={Banner1} />

                </Switch>

            </div>
          </div>
          </HashRouter>
				</div>
			</div>
		)
	}
}

export default Index
